<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>
        畜禽普查记录首页
    </title>
</head>
<body style="background-color: white">
<div id="app">
    <template v-loading="indexLoading">
        <div class="block">
            <span>行政村</span>
            <el-cascader :options="Village" :show-all-levels="false"
                         size="small"
                         v-model="searchChange.Village"></el-cascader>
            <span>品种</span>
            <el-cascader :options="Variety" :show-all-levels="false"
                         size="small"
                         v-model="searchChange.Variety"></el-cascader>
            <span>状态</span>
            <el-cascader :options="Status" :show-all-levels="false"
                         size="small"
                         v-model="searchChange.Status"></el-cascader>
            <el-button @click="handleSearch(1)" size="small" type="primary">筛选</el-button>
            <el-button @click="handleSearch(2)" size="small">重置</el-button>
        </div>
        <el-row style="background-color: #eaedf4;padding: 7px;margin: 7px 0">
            <el-button icon="el-icon-plus" onclick="window.location.href='/yxSurveyXqRecord/addPage'" plain size="mini"
                       type="primary" v-if="[1,2].includes(userLevel)">添加
            </el-button>
            <el-button @click="bulkSubmit" icon="el-icon-check" plain size="mini" type="success"
                       v-if="[1,2].includes(userLevel)">批量提交
            </el-button>
            <el-button plain size="mini" type="info">
                <el-link href="/yxSurveyXqRecord/excel/export" target="_blank">导出</el-link>
            </el-button>
        </el-row>
        <el-table :data="tableData" @select="handleSelect"
                  @select-all="handleSelect" fit size="small" style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="详情" type="expand">
                <template slot-scope="props">
                    <el-form class="demo-table-expand" inline label-position="left">
                        <el-form-item label="普查员">
                            <span>{{ props.row.userId }}</span>
                        </el-form-item>
                        <el-form-item label="来源">
                            <span>{{ props.row.sourceType === '1' ? '已知品种' : '新品种' }}</span>
                        </el-form-item>
                        <el-form-item label="普查时间">
                            <span>{{ props.row.pcDay }}</span>
                        </el-form-item>
                        <el-form-item label="图片">
                            <el-link v-if="props.row.imgUrl !== null"  @click="viewImages(props.row.imgUrl)" type="primary">查看
                            </el-link>
                            <el-link v-else>没有了...</el-link>
                        </el-form-item>
                        <el-form-item label="备注">
                            <span>{{ props.row.remark }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="行政村名" prop="villageId.dqName"></el-table-column>
            <el-table-column label="品种名称" prop="existVarietyId"></el-table-column>
            <el-table-column label="群体数量" prop="allNum" width="100"></el-table-column>
            <el-table-column label="其中">
                <el-table-column label="能繁母畜" prop="femaleNum"></el-table-column>
                <el-table-column label="种公畜" prop="maleNum"></el-table-column>
            </el-table-column>
            <el-table-column label="饲养环境" width="180">
                <template slot-scope="scope">
                    <el-checkbox-group :disabled="!(((scope.row.statusCode ==='0' && userLevel=== 1) || (scope.row.statusCode ==='10'&&userLevel===2))&& loginUserId === scope.row.userCode)" @change="handleCheck" v-model="scope.row.environment">
                        <el-row justify="space-between" type="flex">
                            <el-checkbox @change="setId(scope.row.id)" label="集中饲养"></el-checkbox>
                            <el-checkbox @change="setId(scope.row.id)" label="散养"></el-checkbox>
                        </el-row>
                        <el-row justify="space-between" type="flex">
                            <el-checkbox @change="setId(scope.row.id)" label="定地"></el-checkbox>
                            <el-checkbox @change="setId(scope.row.id)" label="转地"></el-checkbox>
                        </el-row>
                    </el-checkbox-group>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status">
                <template slot-scope="scope">
                    <el-link icon="el-icon-warning-outline" size="mini" type="danger" v-if="scope.row.isBack!==0 ">
                        被退回
                    </el-link>
                    <el-button size="mini">
                        {{scope.row.status}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="190">
                <template slot-scope="scope">
                    <el-col v-if="scope.row.statusCode!=='31'">
                        <el-row v-if="((scope.row.statusCode ==='0' && userLevel=== 1) || (scope.row.statusCode ==='10'&&userLevel===2) )&& loginUserId === scope.row.userCode">

                            <el-button @click="handle(scope.$index, scope.row,3)" icon="el-icon-edit"
                                       size="mini" type="primary">编辑
                            </el-button>
                            <el-button @click="handle(scope.$index, scope.row,4)" icon="el-icon-check"
                                       size="mini" type="warning">提交
                            </el-button>
                        </el-row>
                        <el-row v-else-if="(userLevel===2 && scope.row.statusCode ==='10') || (userLevel===3 && scope.row.statusCode ==='20') || (userLevel===4  && scope.row.statusCode ==='30')">
                            <el-button @click="handle(scope.$index, scope.row,1)" icon="el-icon-s-check"
                                       size="mini" type="success">通过
                            </el-button>
                            <el-button @click="handle(scope.$index, scope.row,2)" icon="el-icon-refresh-left"
                                       size="mini" type="danger">退回
                            </el-button>
                        </el-row>
                        <el-row v-else>
                            <i class="el-icon-loading" style="font-size: 19px;color: #908e8e"></i> <span
                                style="font-size: 17px;color: #908e8e">其他部门处理中...</span>
                        </el-row>
                    </el-col>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
        <el-drawer
                :before-close="handleClose" :visible.sync="showDialog"
                direction="rtl" ref="drawer" size="50%" title="编辑">
            <div style="padding:50px">
                <el-form :model="form" label-position="top">
                    <el-form-item :label-width="formLabelWidth" label="行政村名">
                        <el-cascader :options="Village" :show-all-levels="false" size="small"
                                     v-model="form.villageCode"></el-cascader>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="品种名称">
                        <el-select placeholder="" v-model="form.existVarietyId">
                            <el-option
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="(item,i) of Variety" :key="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="群体数量">
                        <el-col :span="8">
                            <el-input autocomplete="off" placeholder="群体数量" v-model="form.allNum"></el-input>
                        </el-col>
                        <el-col :span="1" class="line">-</el-col>
                        <el-col :span="7">
                            <el-input autocomplete="off" placeholder="能繁母畜" v-model="form.femaleNum"></el-input>
                        </el-col>
                        <el-col :span="1" class="line">-</el-col>
                        <el-col :span="7">
                            <el-input autocomplete="off" placeholder="种公畜" v-model="form.maleNum"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="饲养环境" label-width="50">
                        <el-checkbox-group v-model="form.environment">
                            <el-checkbox label="集中饲养" name="集中饲养"></el-checkbox>
                            <el-checkbox label="散养" name="散养"></el-checkbox>
                            <el-checkbox label="定地" name="定地"></el-checkbox>
                            <el-checkbox label="转地" name="转地"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="备注" prop="maleNum">
                        <el-input type="textarea" placeholder="备注" size="small" style="width: 320px"
                                  v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item label="畜禽照片">
                        <el-divider content-position="left">已存在</el-divider>
                        <ul style="padding: 0">
                            <li v-for="(url,index) in urlList" :key="index" style="list-style: none;display: inline-block;margin-right:10px;position: relative">
                                <div @mouseover="isShowIcon = index" @mouseout="isShowIcon =-1">
                                    <el-image
                                              :preview-src-list="urlList"
                                              :src="url"
                                              style="width: 148px; height: 148px;border-radius: 5px">
                                    </el-image>
                                    <div @mouseover="isShowIcon = index" @mouseout="isShowIcon =-1" v-show="index===isShowIcon" class="deleteImage">
                                        <i class="el-icon-delete" @click="deleteImage(index)" style="cursor: pointer;font-size: 22px;margin-top: 65px"></i>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <el-divider content-position="left">新添加</el-divider>
                        <el-upload ref="upload"
                                action="/upload"
                                :on-success="updateSuccess"
                                list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <el-dialog :visible.sync="dialogVisible">
                    <img :src="dialogImageUrl" alt="" width="100%">
                </el-dialog>
                <div>
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button :loading="loading" @click="handleCommit(1)" type="primary">
                        {{ loading ? '保存中 ...' : '保 存' }}
                    </el-button>
                    <el-button :loading="loading" @click="handleCommit(2)" type="primary">
                        {{ loading ? '保存并提交中 ...' : '保存并提交' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>
        <el-dialog
                :visible.sync="centerDialogVisible"
                title="照片"
                width="50%">
            <ul>
                <li v-for="(url,i) in urlList" :key="i" style="list-style: none;display: inline-block;margin: 0 10px">
                    <el-image
                            :preview-src-list="urlList"
                            :src="url"
                            style="width: 100px; height: 100px">
                    </el-image>
                </li>
            </ul>
            <span class="dialog-footer" slot="footer">
             <el-button @click="centerDialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </template>
</div>

</body>
<!-- import Vue before Element -->
<script src="/static/vendor/vue.js"></script>
<script src="/static/vendor/skin/js/java.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                indexLoading: true,
                userLevel: 0,/*userLevel 指用户单位行政级别 0 无 ，1、乡镇 2、区县 3、市级 4、省级   对应数据库 user表 user_type*/
                loginUserId: '0',
                tableListId: '',
                pageSize: 10,
                isShowIcon:-1,
                centerDialogVisible: false,
                urlList:[],
                addUrlList:[],
                total: 0,
                showDialog: false,
                currentPage: 1,
                searchChange: {Village: [], Variety: [], Status: [],},
                Village: [],
                Variety: [],
                Status: [],
                tableData: [],
                selectList: [],
                loading: false,
                form: {},
                formLabelWidth: '50px',
                dialogImageUrl: '',
                dialogVisible: false,
            }
        },
        methods: {
            /*初始化表格内容*/
            getTableData() {
                con_map = {
                    page_size: this.pageSize,
                    start_num: this.pageSize * (this.currentPage - 1)
                }
                let searchChange = this.searchChange;
                searchChange.page_size=this.pageSize
                searchChange.start_num=this.pageSize * (this.currentPage - 1)
                if (searchChange.Village.length > 0 || searchChange.Variety.length > 0 || searchChange.Status.length > 0) {
                    let data = top.ajax.synclBody("/yxSurveyXqRecord/getSearchList", searchChange);
                    this.tableData = data.items;
                    this.total = data.total;
                }else {
                    let res = top.ajax.synclBody("/yxSurveyXqRecord/getList", con_map);
                    this.tableData = res.data.list;
                    this.total = res.data.count;
                }
            },
            /*筛选*/
            handleSearch(type) {
                let searchChange = this.searchChange;
                if (type === 2) {
                    searchChange.Village = [];
                    searchChange.Variety = [];
                    searchChange.Status = [];
                    this.getTableData();

                } else {
                    if (searchChange.Village.length > 0 || searchChange.Variety.length > 0 || searchChange.Status.length > 0) {
                        searchChange.page_size=this.pageSize
                        searchChange.start_num=this.pageSize * (this.currentPage - 1)
                        let data = top.ajax.synclBody("/yxSurveyXqRecord/getSearchList", searchChange);
                        this.tableData = data.items;
                        this.total = data.total;
                    }
                }
            },
            viewImages(imgUrl){
                if (imgUrl !== null){
                    this.urlList=imgUrl.split(",")
                    this.centerDialogVisible = true
                }
            },
            imageHover(index){
                this.isShowIcon = index
            },
            deleteImage(index){
                this.urlList.splice(index,1)
            },
            /*操作 按钮*/
            handle(index, row, type) {
                if (row.statusCode !== "31") {
                    switch (type) {
                        case 4:
                        case 1: {// 通过
                            top.ajax.synclBody("/yxSurveyXqRecord/updateStatus/" + row.id,);
                            break;
                        }
                        case 2: { //退回
                            top.ajax.synclBody("/yxSurveyXqRecord/goBack/" + row.id,);
                            break;
                        }
                        case 3: { //编辑
                            this.form = top.ajax.synclBody("/yxSurveyXqRecord/getOne/" + row.id,)
                            if (this.form.imgUrl!=null){
                                this.urlList=this.form.imgUrl.split(",")
                            }
                            this.showDialog = true
                            break;
                        }

                    }
                    this.getTableData()
                }
            },
            handleSelect(selectList, val) {
                this.selectList = selectList
            },
            bulkSubmit() {
                let list = this.selectList;
                if (list.length < 1) {
                    this.$notify.error({
                        title: '错误',
                        message: '至少选择一项'
                    });
                } else {
                    for (let el of list) {
                        if (this.userLevel !== 1 && this.userLevel !== 2) {
                            /*没有权限*/
                            this.$notify.error({
                                title: '错误',
                                message: '权限不足'
                            });
                            return;
                        } else if ((this.userLevel === 1 && el.statusCode !== '0') || (this.userLevel === 2 && el.statusCode !== '1')) {
                            /*选项不具备提交状态*/
                            this.$notify.error({
                                title: '错误',
                                message: '有选项不具备提交状态 error_code'
                            });
                            return;
                        } else {
                            this.handle(0, el, 4)
                            this.$notify({
                                title: '成功',
                                message: '提交成功',
                                type: 'success'
                            });

                        }
                    }
                }
            },
            /*复选框 ID 标识 获取*/
            setId(id) {
                this.tableListId = id
            },
            /*实时设置 饲养环境*/
            handleCheck(val) {
                let bean = {
                    id: this.tableListId,
                    environment: val
                }
                top.ajax.synclBody("/yxSurveyXqRecord/setEnvironment", bean);
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getTableData()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getTableData()
            },
            /*加载行政村 tree*/
            getTreeData(data) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].children.length < 1) {
                        data[i].children = undefined;
                    } else {
                        this.getTreeData(data[i].children);
                    }
                }
                return data;
            },
            getVillages(code) {
                let data = top.ajax.synclBody("/yxSurveyXqRecord/getVillages/" + code,);
                this.Village = this.getTreeData(data)
            },
            /*加载已知畜禽品种*/
            getVarieties() {
                this.Variety = top.ajax.synclBody("/yxSurveyXqRecord/getVarieties",);
            },
            getStatus() {
                let dicts = top.ajax.syncl("/dictCategory/getDictList/audit_status", "");
                let status = [];
                for (let dict of dicts) {
                    let bean = {
                        value: dict.dict_code,
                        label: dict.dict_name
                    }
                    status.push(bean)
                }
                this.Status = status;
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要放弃修改表单吗？')
                    .then(_ => {
                        this.loading = false;
                        this.showDialog = false;
                    }).catch(_ => {
                });
            },
            updateSuccess(response, file, fileList){
                if (response.status ==="200"){
                    let url = response.data.url;
                    console.info(url)
                    this.addUrlList.push(url);
                    console.info(this.urlList)
                }
            },
            handleCommit(type) {
                console.info(this.form)
                let environment = this.form.environment;
                let environmentString = ''
                environment.forEach(function (e) {
                    if (e !== '') {
                        environmentString = environmentString + e + ','
                    }
                });

                let bean = {
                    id: this.form.id,
                    villageCode: Array.isArray(this.form.villageCode) ? this.form.villageCode.pop(this.form.villageCode.length - 1) : this.form.villageCode,
                    existVarietyId: this.form.existVarietyId,
                    allNum: this.form.allNum,
                    maleNum: this.form.maleNum,
                    femaleNum: this.form.femaleNum,
                    environment: environmentString,
                    remark: this.form.remark,
                    imgUrl:this.urlList.concat(this.addUrlList).join(","),
                    status: this.form.statusCode
                }
                let msg = ''
                if (type === 1) {
                    msg = '请确认，您将保存该修改内容，但不向上提交，保存之后您任然可以再次修改。'
                }
                if (type === 2) {
                    msg = '您确定保存该修改内容并且提交给上级部门？操作之后您不可再修改。'
                }
                this.$confirm(msg, '提示', {type: 'warning'})
                    .then(_ => {
                        this.loading = true;
                        top.ajax.synclBody("/yxSurveyXqRecord/update/" + type, bean);
                        this.$refs.upload.clearFiles();
                        this.getTableData();
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.loading = false;
                        this.showDialog = false;
                    }).catch(_ => {
                });
            },
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            getLoginUser(){
                let res = top.ajax.synclBody("/user/getCurrentUser", );
                this.loginUserId = res.data.user_id
                this.userLevel = res.data.user_type
            }
        },
        mounted: function () {
            this.getStatus()
            this.getTableData()
            this.getVarieties()
            this.getVillages("610000000000")
            this.getLoginUser()

        },
        created() {
            this.indexLoading = false
        }
    })
</script>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .deleteImage{
        width: 148px;
        height: 148px;
        display: inline-block;
        text-align: center;
        align-items: center;
        border-right: 5px;
        position: absolute;
        background-color: rgba(222,222,222,.5);
        top: 0;left: 0;
    }
</style>
</html>
